<template>
    <div class="van_cell">
        <h3 class="van_cell_title" v-if="data.options.options.length==0">{{ data.name }}</h3>
        <div class="van_cell" v-for="(nav, index) in data.options.options" :key="index">
            <h3 class="van_cell_title">{{ nav.menuName }}</h3>
            <van-grid :column-num="3">
                <van-grid-item
                    v-for="(item, childIndex) in nav.childrens"
                    :key="childIndex"
                    :text="item.menuName"
                >
                    <span slot="icon">
                        <i class="iconfont icon-quanbu-copy" style="font-size: 2em;color: lightskyblue"/>
                    </span>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>
<script>
import { Grid, GridItem } from 'vant'
import { queryMainframeMenuBySchemeId } from '@/api/api'
export default {
    name: 'BaseNavicon',
    components: {
        [Grid.name]: Grid,
        [GridItem.name]: GridItem
    },
    props: {
        data: {
            type: Object
        }

    },
    created() {
        if (this.data.options.menuId) {
            this._queryMainframeMenuBySchemeId()
        }
    },
    methods: {
        _queryMainframeMenuBySchemeId() {
            const params = {
                'schemeId': this.data.options.menuId
            }
            queryMainframeMenuBySchemeId(params)
                .then((response) => {
                    this.data.options.options = response.data
                })
                .catch(function(error) {
                    console.log(error)
                })
        }
    }
}
</script>
